<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../static/frame/Jstools.js"></script>


    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
    <link href="static/frame/zui-theme.css" rel="stylesheet" />
    <!-- ZUI Javascript 依赖 jQuery -->
    <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
    <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
    <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

</head>
<body style="height: 100%;">
<header id="header" class="bg-primary">
  <div class="navbar navbar-inverse navbar-fixed-top" id="navbar" role="banner">
    <div class="container">
      <div class="navbar-header">
          <span  class="navbar-brand">
              <span class="path-zui-36">
                  <i class="path-1"></i>
                  <i class="path-2"></i>
              </span>
              <span class="brand-title">阿里云 PolarDb 管理器</span> &nbsp;
             </span>
      </div>
      <nav class="collapse navbar-collapse zui-navbar-collapse">

      </nav>
    </div>
  </div>

</header>

<div  style="padding-top: 40px;height: 100%;width: 100%;">
    <div style="float: left;height: 100%;border: #cbcbcb solid 1px;">
       <nav class="menu" data-ride="menu" style="width: 250px">
      <ul id="treeMenu" class="tree tree-menu" data-ride="tree">


      </ul>
    </nav>
    </div>
    <div style="padding-left: 255px;height: 100%;padding-bottom: 40px;">
        <div id="whiteList" style=" border: #cbcbcb solid 1px;height: 100%;padding:5px;overflow-y: auto;">
            <div class="panel">
                <div class="panel-heading" >
                    分组名称：
                    <div style="float: right">
                        <input type="button" value="保存" />
                    </div>
                </div>
                <div class="panel-body" contenteditable="" style="height: 50px;">
                    <ul id="navigation">
         {% for item in href_list %}
         <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
         {% endfor %}
       </ul></div>
              </div>
        </div>

        <div  style="position: fixed;bottom: 0;width: 100%;height: 40px;background-color: #f1f1f1;">

                            <div style="float: right;margin-right: 280px;margin-top: 10px;">
                                                <input type="button" value="新增IP安全组" onclick="return addgroup()" />
                                            </div>

                        </div>

    </div>

</div>

</body>

<script type="text/javascript">
    var pk=null;
    var tag="1";
    var DBClusterId="";
    function GetList(obj,note,tag) {
        if (note == null) {
            return;
        }
        //pro = product;
        //if (pk == null) {
            pk = note.context.getAttribute("tag");
        //}
        if (note[0].children[1] != undefined) {

            var Res = JqueryAjax("./ali/polardbList?tag=" + pk, "get");

            list = Res.Items.DBCluster;
            var myTree = $('#treeMenu').data('zui.tree');
            for (var i = 0; i < list.length; i++) {
                var item = null;
                obj=JSON.stringify(list[i]);
                item = [{
                    html: "<a href='#' tag="+obj+" ><i class='icon icon-list'></i>" + list[i]["DBClusterDescription"] + "</a>"


                }];


                // 插入数据到根节点
                myTree.add(note, item);
            }

        }


    }
    $('#treeMenu').on('click', 'a', function () {

        $('#treeMenu li.active').removeClass('active');
        $(this).closest('li').addClass('active');
    });

    function modifyIp(obj, tag,DBClusterId,groupName,flag)
    {
        var iplist=obj.parentNode.parentNode.parentNode.childNodes[3].innerText;
        url = "./ali/ModifyDBClusterAccessWhitelist?tag=" + tag + "&DBClusterId="+DBClusterId+"&groupName="+groupName+
            "&ipList="+iplist+"&flag="+flag;
        res=JqueryAjax(url,"get");
        //alert(res);
    }

    function addgroup(obj) {
        div = document.getElementById("whiteList");
        //div.innerHTML = "";

        div.innerHTML = div.innerHTML + "<div class=\"panel\">\n" +
            "                <div class=\"panel-heading\" contenteditable=\"\" >\n" +
            "                    分组名称：\n" +

            "                    <div style=\"float: right\">\n" +
            "                        <input type=\"button\" value=\"保存\"" +
            " onclick='return modifyIp(this,\"" + tag + "\",\"" + DBClusterId + "\",\"" +
             "\",1);' />\n" +
            "                    </div>\n" +
            " <div style=\"float: right;margin-right:40px;\">\n" +
            "                        <input type=\"button\" value=\"删除\"" +
            " onclick='return modifyIp(this,\"" + tag + "\",\"" + DBClusterId + "\",\"" +  "\",2);' />\n" +
            "                    </div>\n" +

            " <div style=\"float: right;margin-right:40px;\">\n" +
            "                        <input type=\"button\" value=\"应用到全部聚群\"" +
            " onclick='return modifyIp(this,\"" + tag + "\",\"" + DBClusterId + "\",\"" +
            "\",3);' />\n" +
            "                    </div>\n" +

            "                </div>\n" +
            "                <div class=\"panel-body\" contenteditable=\"\" style=\"height: 50px;\">" +
            "</div>\n" +
            "              </div>";
    }


    $('#treeMenu').tree({
        data:JqueryAjax("./ali/manageList","get"),
        expand: function (m, n) {
            //debugger
            if (m[0].children.length >= 3 && m[0].children[2].children.length == 1 && m[0].children[2].children[0].innerText == "") {
                //m[0].childNodes[4].removeChild(m[0].childNodes[4].children[0]);
                m[0].children[2].removeChild(m[0].children[2].children[0]);
                GetList(this, m, 1);

            }
            else {
                try {
                    pk=m.context.parentNode.parentNode.parentNode.childNodes["1"].getAttribute("tag");
                    if (pk==null)
                    {
                        return;
                    }
                    tag=pk;

                    pentity = eval("(" + m.context.getAttribute("tag") + ")");
                    DBClusterId=pentity.DBClusterId;
                    url = "./ali/DescribeDBClusterAccessWhitelist?tag=" + pk + "&DBClusterId="+pentity.DBClusterId;
                    res=JqueryAjax(url,"get");
                    div=document.getElementById("whiteList");
                    div.innerHTML="";
                    for(i=0;i<res.Items.DBClusterIPArray.length;i++)
                    {
                        div.innerHTML=div.innerHTML+"<div class=\"panel\">\n" +
                            "                <div class=\"panel-heading\" >\n" +
                            "                    分组名称：\n" +
                                res.Items.DBClusterIPArray[i].DBClusterIPArrayName+
                            "                    <div style=\"float: right\">\n" +
                            "                        <input type=\"button\" value=\"保存\""+
                            " onclick='return modifyIp(this,\""+pk+"\",\""+pentity.DBClusterId+"\",\""+
                            res.Items.DBClusterIPArray[i].DBClusterIPArrayName+"\",1);' />\n" +
                            "                    </div>\n" +
                            " <div style=\"float: right;margin-right:40px;\">\n" +
                            "                        <input type=\"button\" value=\"删除\""+
                            " onclick='return modifyIp(this,\""+pk+"\",\""+pentity.DBClusterId+"\",\""+
                            res.Items.DBClusterIPArray[i].DBClusterIPArrayName+"\",2);' />\n" +
                            "                    </div>\n" +

                            " <div style=\"float: right;margin-right:40px;\">\n" +
                            "                        <input type=\"button\" value=\"应用到全部聚群\""+
                            " onclick='return modifyIp(this,\""+pk+"\",\""+pentity.DBClusterId+"\",\""+
                            res.Items.DBClusterIPArray[i].DBClusterIPArrayName+"\",3);' />\n" +
                            "                    </div>\n" +

                            "                </div>\n" +
                            "                <div class=\"panel-body\" contenteditable=\"\" style=\"height: 50px;\">"+
                            res.Items.DBClusterIPArray[i].SecurityIps+"</div>\n" +
                            "              </div>";
                    }
                }
                catch (e) {

                }
            }
        }
    });

    </script>

</html>